<template>
  <div class="container">
    <div class="main">
      <div class="main_content">
        <div class="main_header">
          <div class="main_header_title">总览</div>
          <div class="parts">
            <div class="part">
              <div class="part_num red">{{ record.avgScore }}</div>
              <div class="part_desc">平均分</div>
            </div>
            <div class="part">
              <div class="part_num yellow">
                {{ record.present / record.total || 0 }}
              </div>
              <div class="part_desc">出勤率</div>
            </div>
            <div class="part">
              <div class="part_num green">{{ record.total }}</div>
              <div class="part_desc">总人数</div>
            </div>
          </div>
        </div>
        <div class="main_content_title">人员名单</div>
        <div class="main_content_table">
          <a-table
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :columns="columns"
            :data-source="data"
            :pagination="pagination"
            @change="handleTableChange"
            rowKey="uid"
          >
            <!-- 作用域插槽 text 本身是每一列的所有属性 但是 column的配置是 dataIndex 是avaurl 所以text 就变成了每一类的avarurl -->
            <img
              style="width: 50px; height: 50px; border-radius: 50%"
              slot="pic"
              slot-scope="text"
              :src="text"
            />
            <span slot="tag" slot-scope="text">
              <a-tag color="red" v-if="text == ''">未设置</a-tag>
              <span v-else> {{ text }} </span>
            </span>
          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import StudentCheckDetail from "../components/exam-check-student-detail.vue";
const columns = [
  // title:列名; dataIndex: 对应数据源中的键值(kay)
  {
    title: "头像",
    dataIndex: "avatarUrl",
    fixed: "left",
    key: "pic",
    scopedSlots: { customRender: "pic" },
  },
  {
    title: "姓名",
    dataIndex: "name",
    scopedSlots: { customRender: "tag" },
  },

  {
    title: "分数",
    dataIndex: "score",
  },

  {
    title: "总分",
    dataIndex: "correctNum",
  },
  {
    title: "答对数",
    dataIndex: "totalScore",
  },
  {
    title: "总题数",
    dataIndex: "totalNum",
  },
];
const data = [];
export default {
  components: {
    StudentCheckDetail,
  },
  data() {
    return {
      data,
      columns,
      record: {},
      selectedRowKeys: [], // Check here to configure the default column
      idList: [],
      pagination: {
        position: "bottom",
        pageSize: 10,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "15", "20", "25"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed:123 ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      let ids = [];
      selectedRowKeys.forEach((item) => {
        ids.push(item);
      });
      this.idList = ids;
    },
    //   初始化
    async init() {
      let id = this.$route.query.id;
      const { data: res } = await this.$http.get(
        `/admin/exam/statistics/${id}`
      );
      this.record = res.data;
      this.searchRole();
    },
    // 点击分页切换
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      let that = this;
      that.sortedInfo = sorter;
      const pager = { ...that.pagination };
      pager.current = pagination.current;
      that.pagination = pager;
      this.searchRole();
    },
    async searchRole() {
      const { data: res } = await this.$http.get(
        `/admin/exam/detail/${this.record.id}?page=${this.pagination.current}&size=${this.pagination.pageSize}`
      );
      console.log(res.data);
      this.data = res.data.records;
      this.data.forEach((item) => {
        if (!item.name) {
          item.name = "";
        }
      });
    },
  },
  computed: {},
};
</script>
<style  lang='less' scoped>
.red {
  color: #e04f1a;
}
.yellow {
  color: #ffb119;
}
.green {
  color: #82b54b;
}
.container {
  box-sizing: border-box;
  display: flex;
  background-color: #f0f3f8;
  padding: 15px 25px;
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    background-color: #eef1f2;
    .main_content {
      padding: 20px;
      padding-top: 20px;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      .main_header {
        margin-bottom: 25px;
        .parts {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .part {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 380px;
            height: 150px;
            background-color: #fff;
            .part_num {
              font-size: 30px;
              font-weight: 550;
            }
            .part_desc {
              font-size: 18px;
              font-weight: 550;
              color: #6c757d;
            }
          }
        }

        .main_table {
          margin-top: 50px;
        }
        .main_header_title {
          font-size: 38px;
          font-weight: 55;
        }
      }
      .main_content_title {
        font-size: 38px;
        font-weight: 55;
      }
    }
  }
}
/deep/ .ant-table-tbody > tr > td {
  background-color: #fff;
}
</style>